<template>
  <div id="fenxi_zhangdan_ri">
    <canvas
      id="fenxi_zhangdan_ri_container"
      style="width: 100%; height: 265px"
    ></canvas>
    <van-divider
      :style="{
        color: '#1989fa',
        borderColor: '#1989fa',
        padding: '0 16px',
      }"
    >
      分割线
    </van-divider>
    <table id="tab">
      <!-- <tbody>
        <tr>
          <td>近一月消费</td>
          <td>2500.00元</td>
        </tr>
        <tr>
          <td>当月消费</td>
          <td>2500.00元</td>
        </tr>
        <tr>
          <td>当月收入</td>
          <td>2500.00元</td>
        </tr>
      </tbody> -->
    </table>
    <van-divider
      :style="{
        color: '#1989fa',
        borderColor: '#1989fa',
        padding: '0 16px',
      }"
    >
      分割线
    </van-divider>
  </div>
</template>
<script src="https://gw.alipayobjects.com/os/rmsportal/NjNldKHIVQRozfbAOJUW.js"></script>
<script>
import F2 from "@antv/f2";
const ri_fenxi_data = [
  { day: "2021-1-1", money: 38 },
  { day: "2021-1-2", money: 38 },
  { day: "2021-1-3", money: 2 },
  { day: "2021-1-4", money: 38 },
  { day: "2021-1-5", money: 4 },
  { day: "2021-1-6", money: 38 },
  { day: "2021-1-7", money: 348 },
  { day: "2021-1-8", money: 38 },
  { day: "2021-1-9", money: 38 },
  { day: "2021-1-10", money: 538 },
  { day: "2021-1-11", money: 38 },
  { day: "2021-1-12", money: 38 },
  { day: "2021-1-13", money: 3812 },
  { day: "2021-1-14", money: 38 },
  { day: "2021-1-15", money: 2 },
  { day: "2021-1-16", money: 38 },
  { day: "2021-1-17", money: 2 },
  { day: "2021-1-18", money: 11 },
  { day: "2021-1-19", money: 38 },
  { day: "2021-1-20", money: 38 },
  { day: "2021-1-21", money: 321 },
  { day: "2021-1-22", money: 38 },
  { day: "2021-1-23", money: 2 },
  { day: "2021-1-24", money: 38 },
  { day: "2021-1-25", money: 38 },
  { day: "2021-1-26", money: 38 },
  { day: "2021-1-27", money: 38 },
  { day: "2021-1-28", money: 38 },
  { day: "2021-1-29", money: 38 },
  { day: "2021-1-30", money: 38 },
  { day: "2021-1-31", money: 38 },
];
export default {
  name: "fenxi_zhangdan_ri",
  data() {
    return {
      data: {
        list: [],
      },
    };
  },
  props: {
    // 渲染
    xuanran: Boolean,
  },
  mounted() {
    if (this.xuanran) {
      this.init();
    }
  },
  watch: {
    xuanran: function (val) {
      this.init();
    },
  },
  methods: {
    init() {
      this.$api.get(
        "/app/zhang-dan/day-change-zhi-chu-statistic",
        null,
        (r) => {
          this.data.list = r;
          const chart = new F2.Chart({
            id: "fenxi_zhangdan_ri_container",
            pixelRatio: window.devicePixelRatio,
          });

          chart.source(this.data.list, {
            sales: {
              tickCount: 5,
              min: 0,
            },
            day: {
              type: "timeCat",
              range: [0, 1],
              tickCount: 4,
            },
          });
          chart.tooltip({
            custom: true,
            showXTip: true,
            showYTip: true,
            snap: true,
            crosshairsType: "xy",
            crosshairsStyle: {
              lineDash: [2],
            },
          });
          chart.axis("month", {
            label: function label(text, index, total) {
              var textCfg = {};
              if (index === 0) {
                textCfg.textAlign = "left";
              } else if (index === total - 1) {
                textCfg.textAlign = "right";
              }
              return textCfg;
            },
          });
          chart.line().position("day*price");
          chart.render();
        }
      );
    },
  },
};
</script>
<style lang="stylus" scoped>
#tab {
  width: 100%;
}
</style>
